<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll-view">
			<view v-for="(activity, index) in activities" :key="index" class="activity-item"
				@click="toDetail(activity.activityId)">
				<view class="activity-title">
					<text>活动{{index+1}}:{{ activity.activityTitle }}</text>
				</view>
				<view class="activity-image-container">
					<image class="activity-image" :src="activity.activityImage" mode="aspectFill"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('admin', ['getActivities']),
			...mapMutations('user', ['get_activity_attend']),
			toDetail(id) {
				console.log("id:" + id);
				uni.navigateTo({
					url: `/pages/activity/activity-detail/activity-detail?id=${id}`,
				});
			},
		},
		computed: {
			...mapState('admin', ['activities']),
			...mapState('user', ['user', 'activity_attend']),
		},
		beforeMount() {
			if (!this.activities.length) {
				console.log(Boolean(this.activities.length), "数据为空获取数据")
				this.get_activity_attend()
				this.getActivities()
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.scroll-view {
		height: 100%;
		/* 或者设置为具体的高度值 */
	}

	.activity-item {
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ddd;
		padding-bottom: 30rpx;
	}

	.activity-title {
		font-size: 52rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.activity-image-container {
		width: 100%;
		height: 400rpx;
		/* 根据需要调整图片高度 */
		margin-bottom: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.activity-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 使图片保持比例填充容器 */
	}

	.activity-description {
		font-size: 36rpx;
		color: #333;
		line-height: 1.5;
		text-align: justify;
	}
</style>